<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="google-signin-client_id"
      content="391935852788-6vv1p6vc385smv2dhkldf86nql7de6ol.apps.googleusercontent.com">
    <title>个人时间管理系统</title>
    <link rel="shortcut icon" href="./favicon.ico">
    <link rel="stylesheet" href="/static/styles/common.css">
    <link rel="stylesheet" type="text/css" href="/static/styles/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="/static/styles/zzsc.css">
    <link rel="stylesheet" href="/static/styles/dcalendar.picker.css"/>
    <!--<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">-->
    <link rel="stylesheet" href="/static/styles/jquery-ui.css"/>
    <script src="https://apis.google.com/js/platform.js?onload=onLoad" async defer></script>

    <script src="/static/scripts/Plugin/laydate/laydate.js"></script>
    <script src="/static/scripts/Plugin/jquery.min.js"></script>
    <script src="/static/scripts/Plugin/jquery-ui.min.js"></script>
    <script src="/static/scripts/Plugin/echarts.min.js"></script>
    <script src="/static/scripts/echarts_init.js"></script>
    <script src="/static/scripts/socket.io.min.js"></script>
    <script src="/static/scripts/weeksum.js"></script>

</head>
<body>
<!--顶部-->
<header class="header left">
    <div class="left nav">
        <ul>
            <li class="nav_active"><i class="nav_1"></i><a href="/weeksum">每周概况</a> </li>
            <li><i class="nav_2"></i><a href="/monthlySum">每月概况</a> </li>
            <li><i class="nav_2"></i><a href="/yearlySum">每年概况</a> </li>
        </ul>
    </div>
    <div class="header_center left" style="position:relative">
        <h2><strong>{{user_name}}--时间管理系统</strong></h2>
    </div>
    <div class="right nav text_right">
        <ul>
            <li class="nav_active"><i class="nav_1"></i><a href="https://calendar.google.com/calendar/r?tab=wc">记录时间</a> </li>
            <li class="nav_active"><i class="nav_1"></i><a href="javascript:void(0);" onclick="signOut();">退出系统</a> </li>
        </ul>
    </div>

</header>
<!--内容部分-->
<div class="con left">
    <!--数据总概-->
    <div class="con_div">
        <div class="con_div_text left">
            <div class="con_div_text01 left">
                <img id="img_datepicker" src="/static/images/info_1.png" class="left text01_img"/>
                <input type="text" id="datepicker" hidden="true">
                <div class="left text01_div">
                    <p >开始日期</p>
                    <p id="id_start_date"></p>
                </div>
            </div>
            <div class="con_div_text01 right">
                <img src="/static/images/info_2.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>结束日期</p>
                    <p id="id_end_date"></p>
                </div>
            </div>
        </div>
        <div class="con_div_text left">
            <div class="con_div_text01 left">
                <img src="/static/images/info_3.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>工作番茄数(个)</p>
                    <p id="id_work_tomato_nums" class="sky"></p>
                </div>
            </div>
            <div class="con_div_text01 right">
                <img src="/static/images/info_4.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>学习番茄数(个)</p>
                    <p id="id_study_tomato_nums" class="sky"></p>
                </div>
            </div>
        </div>
        <div class="con_div_text left">

            <div class="con_div_text01 left">
                <img src="/static/images/info_5.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>运动总次数(次)</p>
                    <p id="exercise_nums" class="org"></p>
                </div>
            </div>
            <div class="con_div_text01 right">
                <img src="/static/images/info_6.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>娱乐总次数(次)</p>
                    <p id="fun_nums" class="org"></p>
                </div>
            </div>
        </div>
    </div>
    <!--统计分析图-->
    <div class="div_any">
        <div class="left div_any01">
            <div class="div_any_child">
                <div class="div_any_title"><img src="/static/images/title_1.png">学习工作番茄达标率</div>
                <p id="Chart1" class="p_chart"></p>
            </div>
            <div class="div_any_child">
                <div class="div_any_title"><img src="/static/images/title_2.png">睡眠周期走势</div>
                <p id="Chart2" class="p_chart"></p>
            </div>
        </div>
        <div class="div_any02 left ">
            <div class="div_any_child div_height">
                <div class="div_any_title any_title_width"><img src="/static/images/title_0.png">各类时间汇总 </div>
                <div id="Chart3" style="width:97.5%;height:95%;display: inline-block;padding-left: 1.25%;padding-top:2.2%"></div>
            </div>
        </div>
        <div class="right div_any01">
            <div class="div_any_child">
                <div class="div_any_title"><img src="/static/images/title_3.png">各类时间占比图</div>
                <p id="Chart4" class="p_chart"></p>
            </div>
            <div class="div_any_child">
                <div class="div_any_title"><img src="/static/images/title_4.png">重叠/未填时段</div>
                <div class="table_p" style="height: 96%;margin-top: 20px;">
                      <table height="10px">
                          <thead><tr>
                              <th>开始时间</th>
                              <th>结束时间</th>
                              <th>时长（分钟）</th>
                              <th>类别</th>
                          </tr>
                          </thead>
                          <tbody id="Chart5">
                          </tbody>
                      </table>
                 </div>
            </div>
        </div>
    </div>

</div>

<script type="text/javascript">

    window.onresize=function(){
    setTimeout(function(){

        var ids = ["Chart1", "Chart2", "Chart3", "Chart4", "Chart5"]
        for (var i=0;i<ids.length;i++)
        {
            myChart = echarts.init(document.getElementById(ids[i]))
            myChart.resize();
        }
    }, 50)
}
</script>
</body>
</html>
